// 创建一个路由器，并暴露出去
// 1、引入 
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import News from '@/views/News.vue';
import Detail from '@/views/Detail.vue';

// 2、创建路由器
// history模式
// hash 模式

const router = createRouter({
    history: createWebHistory(),
    routes: [
        // 在这里配置你的路由
        {
            name:'zhuye',
            path: '/home',
            component: Home
        },
        {   
            name:'xinwen',
            path: '/news',
            component: News,
            children: [
                {
                    name:'xiangqing',
                    /* path: 'detail' */
                    /* 加?表示可传可不传 */
                    // path: 'detail/:id/:title/:content?',
                    path: 'detail',
                    component: Detail,
                    /* props的第一种写法，值为对象，该对象中的所有key-value的组合最终都会通过props传给Detail组件 */
                    // props:true
                    // 第二种写法：函数写法
                    props(route){
                        return route.query
                    }
                    /* // 第三种写法：对象写法，这种只是说可以，不用
                    props:{
                        id:1,
                        title:'123',
                        content:'123'} */

                }
            ]
        },
        {   
            name:'guanyu',
            path: '/about',
            component: About
        },
        {
            path:'/',
            redirect:'/home'
        }
    ]
});

// 暴露出去
export default router;
